[design-doctor test] sourcebot-1154: Commit diff viewer by adiraju13 · Pull Request #2 · orianna-ai/sourcebot

adiraju13 · 2026-06-10T19:10:05Z

Softlight Overview

Design Score: 4/5

Suggested fixes

Commit author, date, hash, and parent now read as one tidy line under the title.
The change count drops the redundant colored squares for a clean +N / −N readout.
The focused diff status bar cleanly separates file identity from the change count and actions.

Redesign

The commit diff read smaller and busier than the rest of the product, so this pass quiets the header, drops decorative noise, and makes the diff read like the file viewer.

Commit author, date, SHA, and parent now fold into one tidy line, and the change count is a clean +N / -N instead of colored squares.
Diff code now matches the file viewer's font and size, and file vs hunk headers read as a clear hierarchy.

Fresh clean test PR for hosted Design Doctor rerun testing.

Source PR: feat(web): Commit diffs sourcebot-dev/sourcebot#1154
Source label: Sourcebot feat(web): Commit diffs sourcebot-dev/sourcebot#1154
Batch: design-doctor-feature-parity-expanded-20260610-152904Z
Mode: source
Base branch: bench/source-pr-base/design-doctor-feature-parity-expanded-20260610-152904Z/sourcebot-1154
Base SHA: 178b9c0
Head commit: 0a11df8

Benchmark note: Commit diff viewer with full and focused views.

Do not merge. This PR exists so Design Doctor can be run against a clean pull request with no prior review artifacts.

Adds a `commit` pathType to the browse routes (`/browse/<repo>@<branch>/-/commit/<sha>[/<file>]`) that renders a placeholder CommitDiffPanel. Refactors browse path helpers into a discriminated `BrowseProps` union so commitSha is required only for pathType: 'commit'. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Wires up @codemirror/merge (via react-codemirror-merge) inside CommitDiffPanel with a static before/after demo. Adds a CodeDiff component that owns its language extension + view ref so each pane can reconfigure its language compartment independently. Also gates the react-grab dev scripts behind DEBUG_ENABLE_REACT_GRAP so they don't load on every dev page render. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Replace the CodeMirror MergeView-based commit diff rendering with a DOM based split-view that renders directly from git's hunks, inspired by Chrome DevTools' DiffView. Per-file editor instances and the matching getFileSource fetches are gone — a 50-file commit drops from ~100 network requests to 0, and per-row render cost from a full editor mount to a synchronous Lezer highlight + grid emit. - New `LightweightDiffViewer` builds a single 2-column subgrid with hunk headers spanning both sides; each cell uses `subgrid` so line numbers, markers, and content align across all rows. - Pure helpers split out: `hunkParser` (body string → DiffLine[]), `splitPairing` (DiffLine[] → SplitRow[]). - `presentableDiff` from @codemirror/merge supplies character-level intra-line diff highlighting on paired modifications. - Lezer highlight code lifted from `lightweightCodeHighlighter` into `lib/codeHighlight` so both files share the helper. - Drop `react-codemirror-merge` and `commitDiffEditor`. Long lines wrap via `whitespace-pre-wrap break-words` + `minmax(0, 1fr)` on the grid. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

- File path header now sticks to the top of the scroll viewport while scrolling through that file's diff, using the negative-yOffset trick to compensate for the virtualizer's translateY positioning. Same pattern as searchResultsPanel/fileMatchContainer. - Lightweight diff viewer's grid uses `minmax(<min>, max-content)` for line-number and marker columns so they don't collapse to zero width when one side of the diff is entirely blank (fully-added or fully-deleted files), keeping the right pane aligned across files. - Drop the column gap between left and right panes and instead draw a `border-r` separator on the left cells for a cleaner divider. - Hunk header gets an optional className so the first hunk renders with just `border-b` (the file header above already provides the top border), while subsequent hunks render with `border-y` between them. - Drop the per-row footer padding in the virtualizer; rows now sit flush against each other. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

- New `DiffStat` component renders GitHub-style additions/deletions counts with a 5-square indicator scaled log-ish to total change size. Added on the right of each file row header and on the right of the "N files changed" subheader for the commit total. Hidden when there are no line-level changes (pure renames). - Each file row gets a `CopyIconButton` next to the path (copies newPath, falling back to oldPath) and a `CommitActionLink` that opens the file at the commit. Deleted files link to the old path at the parent commit so the user lands on the file's last existing state rather than a 404. - `repoName`, `commitSha`, and `parentSha` are plumbed from the panel through `FileDiffList` to `FileDiffRow` to support the new link. - `computeChangeCounts` is memoized per file in the row. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

…nchoring History panel rows in both the bottom panel and the commits page are now clickable — they navigate to the matching commit diff via router.push, with closest('button, a') short-circuit so inner action buttons keep their own behavior. Bottom-panel history rows also highlight via bg-accent when their commit is the one currently being viewed. Commit diff header now uses AuthorsAvatarGroup + getCommitAuthors + formatAuthorsText, matching latestCommitInfo and historyRow — co-authors parsed from the commit body show up correctly. When the URL trailing path matches one of the commit's files, that file is moved to the top of the FileDiffList rather than scrolled to. Avoids estimateSize-based scroll inaccuracy and works regardless of which side of a rename the URL points to. Lightweight diff viewer short-circuits with "Diff too large to display" for files containing lines over 1000 chars, matching the cutoff in lightweightCodeHighlighter. PathHeader's breadcrumb measurement reserved 175px for "copy button and padding"; the actual reservation needed is ~40px. Reduced so breadcrumbs no longer collapse prematurely on wide layouts. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

- Lift `truncateSha` (was a private helper in getDiffToolComponent) to `lib/utils` so PathHeader can reuse it. The branch/ref display now renders a 40-char SHA as `abc1234`, preserving any `^` / `~N` suffix. - Hide the `·` separator and the path's CopyIconButton when there's no path (repo root). Previously a dangling `·` and copy button rendered with nothing between them. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Adds a `path` query/tool parameter to restrict diff output to changes touching a single file via git's `-- <pathspec>` separator. Refactors the route handler to use the shared `getDiffRequestSchema`. Fixes SOU-1154 (sourcebot-dev#1154) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

- Move single-file commit diffs from `/-/commit/<sha>/<path>` to `/-/blob/<path>?ref=<sha>&diff=true`, keeping the user's browsing revision in the URL. `/-/commit/<sha>` still renders the full multi-file diff. - New `FocusedCommitDiffPanel` with status row (file status badge + authors + relative commit date + "View full commit" + DiffStat + exit-X) and path-filtered `getDiff` so only the single file's diff is fetched. - New preview banner in `CodePreviewPanel` when `?ref=` is set, with a close button that strips the param. - Make `PathHeader`'s revision clickable, linking to that ref's full commit view. - New `HoverPrefetchLink` defers Next.js prefetching until hover; used in history rows to avoid firing many prefetches on render. - Hide the bottom panel on `/-/commit/` views. - Extract `getFileStatus` / `StatusBadge` to a shared `fileStatus.tsx`. - Workaround Radix Tooltip + RSC re-render bug (drop `asChild` from `<TooltipTrigger>`, add `key={commitSha}`) so X / Browse-files buttons survive client navigation between commits. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Sign in to view

+                                            })}
+                                            aria-label="Exit diff view"
+                                        >
+                                            <X className="h-4 w-4" />


Sign in to view

+                                    })}
+                                    aria-label="Close preview"
+                                >
+                                    <X className="h-4 w-4" />


Sign in to view

+                            <span className="text-sm text-muted-foreground">by</span>
+                            <AuthorsAvatarGroup authors={authors} />
+                            <span
+                                className="text-sm font-medium"


Sign in to view

+                    parents={commitResponse.parents}
+                />
+            </div>
+            <div className="flex flex-row items-center justify-between gap-2 px-4 py-2 border-b shrink-0">


Sign in to view

+                    parents={commitResponse.parents}
+                />
+            </div>
+            <div className="flex flex-row items-center justify-between gap-2 px-4 py-2 border-b shrink-0">


Sign in to view

+                                            })}
+                                            aria-label="Exit diff view"
+                                        >
+                                            <X className="h-4 w-4" />


Sign in to view

+                                    })}
+                                    aria-label="Close preview"
+                                >
+                                    <X className="h-4 w-4" />


Sign in to view

+            </div>
+            {file ? (
+                <>
+                    <div className="flex flex-row items-center justify-between gap-2 px-4 py-2 border-b shrink-0">


Sign in to view

+                    parents={commitResponse.parents}
+                />
+            </div>
+            <div className="flex flex-row items-center justify-between gap-2 px-4 py-2 border-b shrink-0">


Sign in to view

+                                        asChild
+                                        variant="ghost"
+                                        size="icon"
+                                        className="h-6 w-6 text-muted-foreground"


Sign in to view

+                    parents={commitResponse.parents}
+                />
+            </div>
+            <div className="flex flex-row items-center justify-between gap-2 px-4 py-2 border-b shrink-0">


Sign in to view

+                        <div className="flex flex-row items-center gap-2">
+                            <DiffStat {...computeChangeCounts(file)} />
+                            <Tooltip key={commitSha}>
+                                <TooltipTrigger>


Sign in to view

+
+    return (
+        <div
+            className="font-mono text-xs leading-relaxed"


Sign in to view

+                        <CommitMessage subject={subject} body={commitResponse.body} />
+                    </div>
+                    <Tooltip key={commitSha}>
+                        <TooltipTrigger>


Sign in to view

+                                                path,
+                                                pathType: 'blob',
+                                            })}
+                                            aria-label="Exit diff view"


Sign in to view

+
+    const filled = filledSquaresForTotal(total);
+    const greenCount = Math.round((filled * additions) / total);
+    const redCount = filled - greenCount;


Sign in to view

+
+    return (
+        <div
+            className="font-mono text-xs leading-relaxed"


Sign in to view

+                                    pathType: 'commit',
+                                    commitSha: parent,
+                                })}
+                                className="underline hover:text-foreground"


Sign in to view

+                            </Tooltip>
+                        </div>
+                    </div>
+                    <div className="flex-1 min-h-0 overflow-y-auto">


Sign in to view

+    if (!line) {
+        return (
+            <div
+                className={`${SIDE_BG[side].blank} ${separator} px-2 py-px`}


Sign in to view

+
+    return (
+        <div
+            className="font-mono text-xs leading-relaxed"


Sign in to view

+                                    pathType: 'commit',
+                                    commitSha: parent,
+                                })}
+                                className="underline hover:text-foreground"


Sign in to view

+
+    return (
+        <div
+            className="font-mono text-xs leading-relaxed"


Sign in to view

+                                    pathType: 'commit',
+                                    commitSha: parent,
+                                })}
+                                className="underline hover:text-foreground"


Sign in to view

+    if (!line) {
+        return (
+            <div
+                className={`${SIDE_BG[side].blank} ${separator} px-2 py-px`}


softlight · 2026-06-30T21:10:29Z

Redesign

Before · After

Full commit diff

The commit's author, date, SHA, and parent now sit on a single tidy line instead of three mismatched rows.
The change count drops the decorative colored squares for a clean +N / -N readout on both the summary and every file.
Diff code matches the file viewer's font and size, and the file header stays bold while the @@ hunk marker recedes for clearer per-file separation.

Before · After

Focused file diff

A single 'Modified' status pill replaces the redundant letter badge plus the word, so the file's state reads at a glance.
The change count, 'View full commit', and close control are grouped on the right with consistent styling.
The diff now uses the file viewer's font and size, and the empty side of the split recedes so additions and deletions stand out.

Prompt to build with AI

This is a comment left during a design review.

Goal:
Apply the Designer's pass shown in the before/after references below. Preserve product behavior, routes, data meaning, and the local design system while matching the stronger composition, hierarchy, spacing, alignment, and visual balance.

Current PR screenshots:
- Full commit diff view current PR: https://drive.orianna.ai/0b7c2126e40eda72e7d9f07504f90751.png
- Focused single-file commit diff view current PR: https://drive.orianna.ai/97a767a36f5d487b884dbf14c0e3c23f.png

After/Designer's pass screenshots:
- Full commit diff view prototype: https://drive.orianna.ai/0e9e0e2a78c00656d2b6fa1b59ae1c52.png
- Focused single-file commit diff view prototype: https://drive.orianna.ai/39651bab0831ef6b2725a879265c9bcb.png

Context:
The original commit diff felt cramped and cluttered next to the rest of Sourcebot: metadata was split across three mismatched lines, the change count carried redundant colored squares, the code was smaller than the file viewer, and the focused view's status bar ran together. This pass folds the metadata into one calm line, removes the decorative squares, matches the diff to the file viewer's typography, and gives files, hunks, and file-status their own clear hierarchy so the change is easy to scan.

What the Designer's pass changed:
- Full commit diff header: author, date, commit SHA (with copy), and parent used to stack across three lines in mismatched fonts. They now read as one quiet metadata line under the title, so the commit is easy to scan at a glance.
- Change count: the +N / -N numbers were trailed by redundant colored squares on the summary bar and on every file. The squares are gone, leaving a clean green/red count.
- Diff readability: the diff now uses the same font and size as the file viewer, and each file's header stays prominent while the @@ hunk markers recede, so it's obvious where one file ends and the next begins.
- Focused single-file view: the status bar previously crammed a status letter, the word 'Modified', author, date, and a link together. It now leads with one clear status pill and groups the change count, 'View full commit', and close on the right.

Use the before screenshots to understand the current surface and the after screenshots as the target direction. Make the smallest coherent set of source changes that gets the existing app to that visual result, then render and inspect the UI before stopping.

softlight · 2026-07-01T19:37:29Z

Before · After

Commit details read as one calm line

The author, date, commit hash, and parent used to stack across three separate lines in mismatched styles. They now fold into one tidy metadata line under the title, so the whole commit is easy to scan at a glance.

Prompt to fix with AI

This is a comment left during a design review.

Comment:
**Commit details read as one calm line**
The author, date, commit hash, and parent used to stack across three separate lines in mismatched styles. They now fold into one tidy metadata line under the title, so the whole commit is easy to scan at a glance.

Issue:
In fullCommitDiffPanel.tsx / commitHashLine.tsx the commit metadata (author+date, and the parent/commit hash row) render on multiple stacked lines.

Suggested fix:
Adopt the redesign: collapse author, date, commit SHA (with copy button), and parent into a single horizontal metadata line separated by middot dividers, as shown in the AFTER capture.

Screenshots:
- Before: https://drive.orianna.ai/72ca476a31f2d89705fd69b136af869c.png
- After: https://drive.orianna.ai/cfc374b0a8939d2f8aa076c824186cd7.png
Use these screenshot URLs as visual evidence if your environment can open remote images.

How can I resolve this? Keep the fix scoped to the PR-touched UI and preserve existing design-system patterns.

softlight · 2026-07-01T19:37:30Z

Before · After

Cleaner change count without the colored squares

The +N / −N counts on the summary bar were trailed by a row of small red and green squares that added visual noise. Dropping them leaves a clean green/red readout that's quicker to read.

Prompt to fix with AI

This is a comment left during a design review.

Comment:
**Cleaner change count without the colored squares**
The +N / −N counts on the summary bar were trailed by a row of small red and green squares that added visual noise. Dropping them leaves a clean green/red readout that's quicker to read.

Issue:
diffStat.tsx renders the +/- counts alongside a series of colored square glyphs representing the additions/deletions ratio.

Suggested fix:
Adopt the redesign: remove the colored square glyphs from diffStat.tsx and keep only the green +N / red −N text count.

Screenshots:
- Before: https://drive.orianna.ai/2c45594945be72824d01a0d6e6ac7935.png
- After: https://drive.orianna.ai/b82199e07d230d7164021bbfb77d3ba1.png
Use these screenshot URLs as visual evidence if your environment can open remote images.

How can I resolve this? Keep the fix scoped to the PR-touched UI and preserve existing design-system patterns.

softlight · 2026-07-01T19:37:31Z

Before · After

Focused diff status bar is easier to parse

The status bar previously crammed a status letter, the word 'Modified', 'by', author, date, and a link all together. It now leads with one clear status pill and groups the change count, 'View full commit', and close on the right, so file identity and actions are cleanly separated.

Prompt to fix with AI

This is a comment left during a design review.

Comment:
**Focused diff status bar is easier to parse**
The status bar previously crammed a status letter, the word 'Modified', 'by', author, date, and a link all together. It now leads with one clear status pill and groups the change count, 'View full commit', and close on the right, so file identity and actions are cleanly separated.

Issue:
focusedCommitDiffPanel.tsx renders a status letter, the word 'Modified', 'by', author, date and the 'View full commit' link inline in one crowded row.

Suggested fix:
Adopt the redesign: render the status as a single pill (dropping the redundant 'M' letter and 'by'), and group the change count, 'View full commit' link, and close button together on the right side of the bar.

Screenshots:
- Before: https://drive.orianna.ai/310175f6ed83e56817e20e126b32c6cf.png
- After: https://drive.orianna.ai/200eb3091a115f0666e33a69932b2b4d.png
Use these screenshot URLs as visual evidence if your environment can open remote images.

How can I resolve this? Keep the fix scoped to the PR-touched UI and preserve existing design-system patterns.

brendan-kellam and others added 14 commits April 28, 2026 10:32

refactor browse components into seperate folders

3b53335

move logger out of utils

29ed7b9

wip

df906c4

feedback

fae7b72

typo

0a11df8

softlight Bot reviewed Jun 10, 2026

View reviewed changes

Comment thread ...ges/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.tsx

})}

aria-label="Exit diff view"

>

<X className="h-4 w-4" />

This comment was marked as outdated.

Sign in to view

softlight Bot reviewed Jun 10, 2026

View reviewed changes

Comment thread packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx

})}

aria-label="Close preview"

>

<X className="h-4 w-4" />

This comment was marked as outdated.

Sign in to view

softlight Bot reviewed Jun 10, 2026

View reviewed changes

softlight Bot reviewed Jun 12, 2026

View reviewed changes

Comment thread ...ges/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.tsx

})}

aria-label="Exit diff view"

>

<X className="h-4 w-4" />

This comment was marked as outdated.

Sign in to view

softlight Bot reviewed Jun 12, 2026

View reviewed changes

Comment thread packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx

})}

aria-label="Close preview"

>

<X className="h-4 w-4" />

This comment was marked as outdated.

Sign in to view

softlight Bot reviewed Jun 12, 2026

View reviewed changes

Comment thread ...ges/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.tsx

</div>

{file ? (

<>

<div className="flex flex-row items-center justify-between gap-2 px-4 py-2 border-b shrink-0">

This comment was marked as outdated.

Sign in to view

softlight Bot reviewed Jun 24, 2026

View reviewed changes

Comment thread ...ges/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.tsx

asChild

variant="ghost"

size="icon"

className="h-6 w-6 text-muted-foreground"

This comment was marked as outdated.

Sign in to view

softlight Bot reviewed Jun 24, 2026

View reviewed changes

Comment thread ...ages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/lightweightDiffViewer.tsx

return (

<div

className="font-mono text-xs leading-relaxed"

This comment was marked as outdated.

Sign in to view

softlight Bot reviewed Jun 24, 2026

View reviewed changes

Comment thread packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fullCommitDiffPanel.tsx

<CommitMessage subject={subject} body={commitResponse.body} />

</div>

<Tooltip key={commitSha}>

<TooltipTrigger>

This comment was marked as outdated.

Sign in to view

softlight Bot reviewed Jun 24, 2026

View reviewed changes

Comment thread ...ges/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.tsx

path,

pathType: 'blob',

})}

aria-label="Exit diff view"

This comment was marked as outdated.

Sign in to view

softlight Bot reviewed Jun 24, 2026

View reviewed changes

Comment thread packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/diffStat.tsx

const filled = filledSquaresForTotal(total);

const greenCount = Math.round((filled * additions) / total);

const redCount = filled - greenCount;

This comment was marked as outdated.

Sign in to view

softlight Bot reviewed Jun 25, 2026

View reviewed changes

Comment thread ...ages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/lightweightDiffViewer.tsx

return (

<div

className="font-mono text-xs leading-relaxed"

This comment was marked as outdated.

Sign in to view

softlight Bot reviewed Jun 25, 2026

View reviewed changes

Comment thread packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/commitHashLine.tsx

pathType: 'commit',

commitSha: parent,

})}

className="underline hover:text-foreground"

This comment was marked as outdated.

Sign in to view

softlight Bot reviewed Jun 25, 2026

View reviewed changes

Comment thread ...ges/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.tsx

</Tooltip>

</div>

</div>

<div className="flex-1 min-h-0 overflow-y-auto">

This comment was marked as outdated.

Sign in to view

softlight Bot reviewed Jun 25, 2026

View reviewed changes

Comment thread ...ages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/lightweightDiffViewer.tsx

if (!line) {

return (

<div

className={`${SIDE_BG[side].blank} ${separator} px-2 py-px`}

This comment was marked as outdated.

Sign in to view